<template>
  <a-modal v-model="visible" title="跳题规则" @ok="handleOk" width="50%">
    <div class="_pt-9 _pb-9 _pl-16 _pr-16 _mb-20" style="background-color: #FFF7E8;">
      <div>
        <a-icon type="exclamation-circle" class="fz-16" theme="filled" style="color: #FF7D00;" />
        <span class="fz-14 _ml-8">您可以为以下单选题选项增加规则来实现题目的显示或隐藏；</span>
      </div>
      <div class="_pl-24">
        <span class="fz-14">如您不了解要怎么设置跳题，</span>
        <span class="fz-14" style="color: #165DFF;">
          <a href="https://www.yuque.com/hbkj2024/mdvank/ma6ga6v2pw4kf9ri?singleDoc" target="_blank"
            >可点击查看跳题设置操作指引；</a
          >
        </span>
      </div>
    </div>
    <div v-for="(item, index) in fieldList">
      <template v-if="item.itemType == 'RadioGroup' && !item.dataType && index != fieldList.length - 1">
        <div class="disFlxAC  _mb-8" style="gap:4px !important">
          <span v-if="item.isRequired" style="color: #F53F3F;">*</span>
          <span>{{ item.showName || item.name }}</span>
        </div>
        <div class="disFlxAC gap-36 _mb-20">
          <a-input style="flex: 1;" disabled />

          <div @click="handleOpenJumpQuestionRuleSet(index)">
            <a-icon type="edit" class="fz-14 _mr-8" style="color: #165DFF;" />
            <span style="color: #165DFF;" class="fz-14">跳题规则设置</span>
          </div>
        </div>
      </template>
    </div>
    <JumpQuestionRuleSet ref="jumpQuestionRuleSetRef" @setRuleSuccess="handleSetRuleSuccess"></JumpQuestionRuleSet>
  </a-modal>
</template>
<script>
import { cloneDeep } from 'lodash-es'
import JumpQuestionRuleSet from '../JumpQuestionRuleSet/index.vue'

export default {
  components: {
    JumpQuestionRuleSet
  },
  data() {
    return {
      visible: false,
      fieldList: []
    }
  },

  methods: {
    handleOk() {
      this.visible = false
      this.$emit('setRuleSuccess', this.fieldList)
    },
    open(fieldList) {
      this.visible = true
      this.fieldList = cloneDeep(fieldList)
    },
    handleOpenJumpQuestionRuleSet(index) {
      this.$refs.jumpQuestionRuleSetRef.open(
        this.fieldList[index],
        this.fieldList.slice(index + 1, this.fieldList.length)
      )
    },
    handleSetRuleSuccess(item) {
      this.$set(this.fieldList, item.sort, item)
    }
  }
}
</script>
